<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <!--script src="https://unpkg.com/pdf-lib"></script-->
    
    <script src="pdf-lib.min.js"></script>
    <style type="text/css">
			.center-text {
				text-align: center;
			}
			
			.inputfile {
				opacity: 0;
			}

			.lab {
				border-radius: 10px;
				background-color: #cc99ff;
				font-family: 楷体;
				font-size: 24px;
			}
			.boxwidth200{
				width: 200px;
			}
		</style>
  </head>

  <body>
    <h3 class="center-text">拆分Pdf</h3><br />
	<div class="center-text">
		<input type="file" name="file1" id="file1" class="inputfile" accept="application/pdf" /><br />
		<label for="file1" class='lab'>打开Pdf文件</label><br /><br />
		<div class="center-text" id="img_info"></div>
	</div>	
	<div class="center-text">
		<label for="range" id="range-label">页面范围:</label>
		<input type="text" id="range" class="center-text boxwidth200" value="1-1" />
		<br/>
	</div>
	<div class="center-text">
		<br/>
		<button id="btn">拆分</button>
	</div>
  </body>

  <script>
		//file extends blob
		function createURL(file) {
			var url = null;
			if (window.createObjectURL != undefined) {
				url = window.createObjectURL(file);
			} else if (window.URL != undefined) { // mozilla(firefox)  
				url = window.URL.createObjectURL(file);
			} else if (window.webkitURL != undefined) { // webkit or chrome  
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		};
		function downLoad(url,filename){
			var oA = document.createElement("a");
			oA.download = filename;// 设置下载的文件名，默认是'下载'
			oA.href = url;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
		}
		function getRange2Array(range,max){
			range=range.replace(/，/g,",").replace(/——/g,"-");
			//console.log(range,max);
			var strs=range.split(",");
			var pages=[];
			for(var i=0;i<strs.length;i++){
				//console.log(strs[i]);
				var ss=strs[i].split("-");
				if(ss.length==1){		
					var v=ss[0];
					//console.log(v);
					pages.push(v-0);
					continue;
				}else if(ss.length==2){
					var v1=ss[0]-0;
					var v2=ss[1]-0;
					//console.log(v1);
					//console.log(v2);
					if(!isNaN(v1)&&!isNaN(v2)&&(v1>0&&v1<=max)&&(v2>0&&v2<=max)&&v1<=v2){
						for(var j=v1;j<=v2;j++){
							pages.push(j);
						}
						continue;
					}					
				}
				alert("页码填写错误");
				return [];		
			}
			return pages;	
		}
		const readSrcPdf=async (file)=>{
			const url=createURL(file);
			console.log(file, url);
			//const 
			srcDoc = await PDFLib.PDFDocument.load(await fetch(url).then(res => res.arrayBuffer()));
			const count=srcDoc.getPageCount();
			document.getElementById("range-label").innerText ="页面范围,共"+count+"页";
			//return srcDoc;
		}
		const splitPdf=async (srcDoc,range)=>{
			// 实例
			const pdfDoc = await PDFLib.PDFDocument.create()
			const copiedPages = await pdfDoc.copyPages(srcDoc, range);
			console.log(copiedPages);
			for(const page of copiedPages){
				pdfDoc.addPage(page);
			}
			const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
			downLoad(pdfDataUri,"download.pdf");
		}
		
		
		var srcDoc=null;
		document.getElementById("file1").addEventListener('change', function(event){
			if(this.files.length<1)return;
			const file=this.files[0];
			readSrcPdf(file);
		});
		document.getElementById("btn").addEventListener('click', function(event){
			console.log("click");
			const rangeStr=document.getElementById("range").value;
			const range=getRange2Array(rangeStr,srcDoc.getPageCount());
			console.log(range);
			if(range.length<=0||srcDoc==null)return;
			for(var i=0;i<range.length;i++){
				range[i]-=1;
			}
			splitPdf(srcDoc,range);
		});
  </script>
</html>